<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- 用router组件来导航 -->
        <router-link to="/index">首页</router-link>
        <!-- <router-link to="/login">登录页</router-link> -->
        <router-link to="/product/1">电器页</router-link>
        <router-link to="/product/2">手机页</router-link>
        <router-link to="/product/3">家具页</router-link>
        <!-- 指定路由所映射的组件的 展示区域 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 创建组件
    var Index= Vue.component('index',{
        template:`<div>这里是首页</div>`
    })
    var dianqi= Vue.component('dianqi',{
        template:`<div>这里是电器页</div>`
    })
    var shouji= Vue.component('shouji',{
        template:`<div>这里是手机页</div>`
    })
    var jiaju= Vue.component('jiaju',{
        template:`<div>这里是家具页</div>`
    })
    var Product = Vue.component('product',{
        template:`<div>
                    <h1>产品</h1>
                    <h3>{{info}}</h3>
                    <button @click="show">点击获取页面</button>
                    <router-view></router-view>
                  </div>`,
        data(){
            return{
                info:"??"
            }
        },
        watch: {
           $route(to,from){
            var id = to.params.id;
            if(id==1){
                this.info="这里是电器页面"
            }else if(id==2){
                this.info="这里是手机页面"
            }else if(id==3){
                this.info="这里是家具页面"
            }
           }
        },
        mounted () {
            // console.log(this.$route)
            var id = this.$route.params.id;
            if(id==1){
                this.info="这里是电器页面"
            }else if(id==2){
                this.info="这里是手机页面"
            }else if(id==3){
                this.info="这里是家具页面"
            }
        },
        methods: {
            show(){
                console.log(this.$route)
                var id = this.$route.params.id;
                if(id==1){
                    this.$router.push({name:"dianqi"})
                }else if(id==2){
                    this.$router.push({name:"shouji"})
                }else if(id==3){
                    this.$router.push({name:"jiaju"})
                }
            }
        }
    })
 
    // 创建路由实例
    var routers = new VueRouter({
        // 配置路由
        routes:[
            {name:"shouye",path:"/index",component:Index},
            {name:"product",path:'/product/:id',component:Product,
            children:[
                {name:'dianqi',path:'dianqi',component:dianqi},
                {name:'shouji',path:'shouji',component:shouji},
                {name:'jiaju',path:'jiaju',component:jiaju},
            ]
            },
        ]
    }) 

    var vm=new Vue({
        el:"#app",
        // 注入路由， 从而让整个页面都具有路由功能
        router:routers,
        data:{

        }
    })
</script>
</html>